<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网易云顶部top</title>
    <link
      rel="shortcut icon"
      href="//s1.music.126.net/style/favicon.ico?v20180823"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <style>
      .header > .top {
        height: 70px;
        background-color: #242424;
        box-sizing: border-box;
        border-bottom: 1px solid #000;
      }

      .topbar {
        display: flex;
        justify-content: space-between;
        height: 69px;
        line-height: 69px;
      }

      .topbar .bar-left {
        display: flex;
      }

      .topbar .bar-left .logo {
        background-image: url(./img/topbar_sprite.png);
      }

      .topbar .bar-left .logo a {
        display: block;
        width: 157px;
        padding-right: 20px;
        text-indent: -99999px;
      }

      .topbar .bar-left .list {
        display: flex;
      }

      .topbar .bar-left .list .item {
        position: relative;
        display: block;
        padding: 0 20px;
        font-size: 14px;
        color: #ccc;
      }

      .topbar .bar-left .list .item:hover,
      .topbar .bar-left .list .item.active {
        color: #fff;
        background-color: #000;
      }

      .topbar .bar-left .list .item.active::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 7px;
        left: 0;
        right: 0;
        bottom: -2px;
        margin: 0 auto;
        background: url(./img/topbar_sprite.png) -226px 0;
      }

      .topbar .bar-left .list .item .icon-hot {
        position: absolute;
        top: 14px;
        right: -18px;
      }

      /* right side */
      .topbar .bar-right {
        display: flex;
        align-items: center;
        padding-right: 20px;
      }

      .topbar .bar-right .login a {
        color: #787878;
      }

      .topbar .bar-right .login:hover a {
        color: #ccc;
      }

      .topbar .bar-right .login a:hover {
        color: #787878;
        text-decoration: underline;
      }

      .topbar .bar-right .anthor a {
        display: inline-block;
        width: 90px;
        height: 32px;
        margin: 0 20px;
        line-height: 32px;
        color: #ccc;
        text-align: center;
        box-sizing: border-box;
        border: 1px solid #4f4f4f;
        border-radius: 20px;
      }

      .topbar .bar-right .anthor a:hover {
        color: #fff;
        border-color: #fff;
      }

      .topbar .bar-right .search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 158px;
        height: 32px;
        box-sizing: border-box;
        padding-right: 10px;
        border-radius: 30px;
        background: #fff url(./img/topbar_sprite.png) 0 -99px;
      }

      .topbar .bar-right .search input {
        font-size: 12px;
        width: 118px;
      }

      /* topnav section */
      .nav {
        height: 35px;
        line-height: 35px;
        background-color: #c20c0c;
        box-sizing: border-box;
        border-bottom: 1px solid #a40011;
      }

      .navbar {
        box-sizing: border-box;
        padding-left: 180px;
      }

      .navbar .list {
        display: flex;
      }

      .navbar .list .item {
        display: inline-block;
      }

      .navbar .list .item span {
        display: inline-block;
        padding: 0 13px;
        margin: 7px 17px;
        height: 20px;
        line-height: 21px;
        color: #fff;
        border-radius: 20px;
      }

      .navbar .list .item:hover span,
      .navbar .list .item.active span {
        background-color: #9b0909;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="top">
        <div class="topbar wrapper_01">
          <div class="bar-left">
            <h1 class="logo">
              <a href="#">网易云音乐</a>
            </h1>
            <ul class="list">
              <li><a href="#" class="item active">发现音乐</a></li>
              <li><a href="#" class="item">我的音乐</a></li>
              <li><a href="#" class="item">关注</a></li>
              <li><a href="#" class="item">商城</a></li>
              <li><a href="#" class="item">音乐人</a></li>
              <li>
                <a href="#" class="item"
                  >下载客户端
                  <i class="topbar_sprite topbar_icon_hot icon-hot"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="bar-right">
            <div class="search">
              <input type="text" placeholder="音乐/视频/电台/用户" />
            </div>
            <div class="anthor">
              <a href="#">创作者中心</a>
            </div>
            <div class="login">
              <a href="#">登录</a>
            </div>
          </div>
        </div>
      </div>

      <div class="nav">
        <div class="navbar wrapper_01">
          <ul class="list">
            <li>
              <a href="#" class="item active"><span>推荐</span></a>
            </li>
            <li>
              <a href="#" class="item"><span>排行榜</span></a>
            </li>
            <li>
              <a href="#" class="item"><span>歌单</span></a>
            </li>
            <li>
              <a href="#" class="item"><span>主播电台</span></a>
            </li>
            <li>
              <a href="#" class="item"><span>歌手</span></a>
            </li>
            <li>
              <a href="#" class="item"><span>新碟上架</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
